<template>
	<view class="cwgProgress" >
		<view :style="{ background: bottomBackground, height: progressHeight + 'px', borderRadius: (borderRadius==-1? progressHeight/2 :borderRadius) + 'px' }"></view>
		<view :style="{ background: firstBackground, height: progressHeight + 'px', marginTop: -progressHeight + 'px', borderRadius: (borderRadius==-1? progressHeight/2 :borderRadius) + 'px',width: progress/100 * 100+'%'}"></view>
	</view>
</template>

<script>
var _self;
// var borderRadius1;
export default {
	name: 'cwgProgress',
	// 属性
	props: {
		progressHeight: {
			type: Number,
			default: 5
		},

		bottomBackground: {
			type: String,
			default: '#EBEBEB'
		},
		firstBackground: {
			type: String,
			default: '#617FDE'
		},
		progress:{
			type: Number,
			default: 20
		},
		progressWidth:{
			type: Number,
			default: 375
		},
		borderRadius:{
			type:Number,
			default:-1
		}
	},
	onLoad: () => {
		_self = this;
	},
	data() {
		return {
			// borderRadius1:progressHeight/2,
		};
	}
};
</script>

<style lang="scss">
.cwgProgress {
	display: flex;
	flex-direction: column;
	width: 100%;
}
</style>
